<template>
  <el-dialog
    :title="modalTitle"
    :visible="visible"
    :before-close="cancel">
    <el-tree
      :data="data4"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span v-if="data.buttons &&data.buttons.length>1">
        <el-checkbox-group>
          <el-checkbox label="编辑" name="type"></el-checkbox>
          <el-checkbox label="添加" name="type"></el-checkbox>
        </el-checkbox-group>
        </span>
      </span>
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">提 交</el-button>
    </div>
  </el-dialog>

</template>

<script>
  export default {
    name: "permission-config",
    props: ['visible', 'modalTitle'],
    data() {
      const data = [{
        id: 1,
        label: '会员管理',
        buttons:[],
        children: [{
          id: 2,
          label: '会员列表',
          buttons:[1,2,3],
          children: [{
            id: 3,
            label: '菜单查看'
          }, {
            id: 4,
            label: '按钮操作',
            children: [{
              id: 5,
              label: '编辑资料'
            }, {
              id: 9,
              label: '编辑资料'
            }]
          }]
        }, {
          id: 6,
          label: '当前在线会员',
          children: [{
            id: 7,
            label: '查看'
          }, {
            id: 8,
            label: '踢线'
          }, {
            id: 9,
            label: '批量踢线'
          }]
        }]
      }];
      return {
        data4: JSON.parse(JSON.stringify(data)),
        data5: JSON.parse(JSON.stringify(data))
      }
    },

    methods: {
      cancel() {
        this.$emit('cancel');
      },
      submit() {
        this.$emit('cancel')
      }
    }

  }
</script>

<style scoped>

</style>
